// This code is aging and could use some organization / optimization
jQuery(function($){

var html =
{ text: '<div class="input $type outer"><div class="left"></div><div class="right"></div><div class="center"><div class="inner"></div></div></div>'
, icon: '<div class="icon"></div>'
, placeholder: '<div class="placeholder"></div>'
, reset: '<div class="reset"></div>'
, checkbox:'<div class="input checkbox"><div/></div>'
, radio:'<div class="input radio"><div><span/></div></div>'
, select:'<div class="input select"><div class="wrapValue outer"><div class="left"></div><div class="right"></div><div class="center inner"><div class="value"/><div class="arrow"/></div></div><div class="wrapOptions"><div class="top"></div><ul class="options"/></div></div>'
, option:'<li><span/></li>'
};

var values =
{ select:'.value'
, options:'.options'
, dropdown:'.wrapOptions'
, selectArea:'.wrapValue'
, option:'span'
, text:'.inner'
, placeholder:'.placeholder'
};

var inputText = function(type){
  type = (type||"").toLowerCase();
  var self = $(this).before(html.text.replace('$type',type)), box = self.prev();
  self.data("skinned",true);
  box.find(values.text).append(self);
  box.addClass( self.attr("class") );
  var update = function(){ box[(self.val()?"remove":"add")+"Class"]("empty"); }; update();
  self.focus(function(){ box.addClass("focus"); })
      .blur(function(){ box.removeClass("focus"); })
      .bind("mousedown",function(){ box.addClass("active"); })
      .bind("mouseup",function(){ box.removeClass("active"); })
      .keydown(function(){ setTimeout(update,1); })
      .change(update);
  box.click(function(){ self.focus(); });
  if(this.disabled) box.addClass("disabled");
  var placeholder = this.getAttribute("placeholder");
  if( placeholder ){
    $(html.placeholder).appendTo(box.find(values.text));
    box.find(values.placeholder).text(placeholder);
  }
  if(inputText[type]) inputText[type].call(this,box);
};

inputText.search = function(box){
  var self = $(this)
    , icon = $(html.icon).click(function(){ if(!box.is("empty")) self.trigger('submit'); })
    , reset = $(html.reset).click(function(){ self.val('').change(); });
  this.setAttribute('type','text');
  box.find(values.text).prepend(icon).append(reset);
};

inputText.submit = function(box){
  var self = $(this).css({position:"absolute",top:0,left:0,opacity:0})
    , resize = function(){ self.css({width:box.width(),height:box.height()}); };
  if(/^static$/i.test(box.css("position"))){ box.css({position:"relative"}); }
  self.before( self.val() ).appendTo(box);
  box.bind("resize mouseenter",resize); resize();
};

var inputToggle = function(type){
  var self = $(this).before(html[type]), box = self.prev().css({position:"relative",overflow:"hidden"})
    , resize = function(){ self.css({width:box.width(),height:box.height()}); };
  self.data("skinned",true);
  box.addClass( self.attr("class") ).bind("resize mouseenter",resize); resize();
  self.css({position:"absolute",top:0,left:0,opacity:0})
  .appendTo(box).bind("update",function(e,again){
    box[(this.checked?"add":"remove")+"Class"]("checked");
    if(!again && this.name) $('input[name='+this.name+']').not(this).trigger("update",[true]);
  }).change(function(){ $(this).trigger("update"); }).trigger("update")
  .focus(function(){ box.addClass("focus"); }).blur(function(){ box.removeClass("focus"); })
  .bind("keydown mousedown",function(){
    box.addClass("active");
    $(document).one("keyup mouseup",function(){
      box.removeClass("active");
      setTimeout(function(){ self.trigger("update"); },1);
    });
  });
  if(this.disabled) box.addClass("disabled");
};

skinSelect = function(){};
//if(!$.browser.msie || +$.browser.version >= 8.0) //IE7 bug fix
skinSelect = function(){
  var self=$(this);
  if(self.data("skinned")) { return false; }
  self.data("skinned",true);
  var h, hidden = $([]);
  self.before(html.select);
  var box=self.prev();
  box.addClass( self.attr("class") );
  if(self.attr("multiple") || self.attr("size")>1) { box.addClass("multiple") }
  if(self.css("display")=="none") { box.hide(); }
  self.hide();
  var options = values.options && box.find(values.options) || box;
  var dropdown = values.dropdown && box.find(values.dropdown) || box;
  var focused=false;
  var over=false;
  var selfWidth=self.width()-13;
  var option = $(html.option)
  .mousedown(function(){ focused=true; })
  .mousemove(function(){
    var option = $(this);
    if(option.is("focus")) return;
    options.children().removeClass("focus");
    option.addClass("focus");
  })
  .click(function(){
    var v = values.option && $(this).find(values.option) || $(this);
    self.val(v.attr("value")).change();
    self[0].focus();
    box.removeClass("active");
    return false;
  });
  if(self.css("width")=="auto") selfWidth=0;
  self.find("option").each(function(){
    var value = $(this).val();
    var name = $(this).html();
    if(/^[\s\r\n]*$/.test(name)) name='&nbsp;';
    var elem = option.clone(true);
    var v = values.option && elem.find(values.option) || elem;
    v.html(name);
    v.attr({value:value});
    options.append(elem);
  });
  var optionWidth=0;
  dropdown.each(function(){
    var display=[], elems=$(this).parents().andSelf().not(":visible");
    for(var i=elems.length; i-->0;) {
      display[i]=elems[i].style.display;
      elems[i].style.display="block";
    }
    var test = $(this).outerHeight()<$(this).find(values.options)[0].scrollHeight;
    if(selfWidth) options.width(selfWidth+8);
    if(test && selfWidth) options.width(selfWidth+6);
    optionsWidth=options.parent().width()+12;
    if(!selfWidth) options.width(optionsWidth);
    for(var i=elems.length; i-->0;) {
      elems[i].style.display=display[i];
    }
  });
  var v = values.select && box.find(values.select) || box;
  if(selfWidth) v.width(selfWidth)
  else v.width(optionsWidth);
  var fn = function(e){
    var option = $(options.children()[self.find("option:selected").prevAll().length]);
    options.children().removeClass("focus");
    option.addClass("focus");
    if(values.option) option=option.find(values.option);
    var html = option.html();
    if(html) v.html(html);
    else v.html('&nbsp;');
  };
  self.css({width:0,height:0,position:"absolute",top:0,left:0,opacity:0}).show()
  .appendTo(box).change(fn)
  .keydown(function(e){
    if(e.which==13) box.removeClass("active");
    setTimeout(function(){ self.change(); },1);
  }).focus(function(){
    box.addClass("focus down").removeClass("up");
    if($(window).height()+$(document).scrollTop()<dropdown.height()+dropdown.offset().top) {
      box.addClass("up");
      box.removeClass("down");
    }
  }).blur(function(){
    if(focused) focused=false;
    else box.removeClass("focus");
  });
  fn.call(self);
  $(document).bind("mouseup",function(){
    if(!over) box.removeClass("active");
  });
  box.mouseenter(function(){ over=true; }).mouseleave(function(){ over=false });
  box.click(function(){ setTimeout(function(){ self.show(); self[0].focus(); box.addClass("active"); },1); });
  box.find(values.selectArea).click(function(){ if(box.is(".active")) { box.removeClass("active"); return false; } });
  $(this).closest("td.infoText div").css({overflow:"visible"});
  hidden.each(function(){
    this.style.display = $(this).data("input.display");
  });
};

var inputs = [".inputLauncher"];
var isInput = function(){
  for(var i=inputs.length; i-->0;){
    if( $(this).is(inputs[i]) ) return true;
  } return false;
};
var notSkinned = function(){ return !$(this).data("skinned"); };
var isInputText = function(){ return /^(?:text|search|url|tel|email|password|number|submit|datetime|datetimelocal|date|month|week|time|range|color)$/i.test( this.getAttribute('type') ); };

applySkinning = function(){
  $("select").filter(isInput).each(skinSelect);
  $.each(['checkbox','radio'],function(i,name){
    if(html[name]) $("input:"+name).filter(isInput).filter(notSkinned).each(function(){ inputToggle.call(this,name); });
  });
  $("input").filter(isInput).filter(notSkinned).filter(isInputText)
  .each(function(){ inputText.call(this,this.getAttribute('type')); });
};
applySkinning();
$(document).ajaxComplete(applySkinning);
$.fn.inputs = function(){ inputs.push( this.selector ); applySkinning(); };

});

